<template>
  <div class="movie-tag">
    <div class="movie-tophalf">
      <a class="movie-img">
        <img class="movie-tag-img movieImg" :src="imovie.img" alt="imovie.img">
      </a>
      <div class="movie-brief">
        <a class="title" v-html="imovie.title"/>&nbsp;<span>{{imovie.subtitle}}</span>
        <p class="movie-disc">
          <span>{{imovie.country}},{{imovie.language}},{{imovie.year}}</span><br>
          类型：<span v-for="itype in imovie.type" :key="itype">{{itype}}&nbsp;</span><br>
          <span style="color: #1c1ca0">导演：</span>
          <span v-for="dr in imovie.director" :key="dr">
          {{dr}}&nbsp;
          </span><br>
          <span style="color: #910004">演员：</span>
          <span v-for="cast in imovie.stars" :key="cast">
            {{cast}} &nbsp;
          </span><br>
        </p>
        <p class="rate">
          <el-rate
            v-model="imovie.score"
            disabled
            text-color="#ff9900">
          </el-rate>
          <span class="rate-value">{{imovie.score * 2}}</span>
        </p>
        <div>
          <el-button class="el-icon-star-on follow-class" v-show="isc" @click="unstarMovie">已收藏</el-button>
          <el-button class="el-icon-star-off follow-class" v-show="!isc" @click="starMovie">收藏</el-button>
        </div>
      </div>

    </div>
    <div class="introduce-class">{{imovie.introduce}}</div>
    <el-tooltip class="item" effect="dark" content="点击复制" placement="top-start">
    <el-button type="button"
    v-clipboard:copy="imovie.download"
    v-clipboard:success="onCopy"
    v-clipboard:error="onError">下载链接
    </el-button>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  /**
   * 想一下如果刷新页面的问题
   * reload方法
   * reload (){
       this.isRouterAlive = false
       this.$nextTick(function(){
          this.isRouterAlive = true
       })
    }
   */
  data () {
    return {
    }
  },
  computed: {
    imovie () {
      return this.$store.getters.movieList[0]
    },
    isc () {
      return this.$store.getters.isc
    }
  },
  methods: {
    onCopy: function (e) {
      alert('You just copied the download link')
    },
    onError: function (e) {
      alert('Failed to copy the download link')
    },
    starMovie () {
      this.$store.commit('ISC', {isc: true})
      this.$store.dispatch('collectionMovie')
    },
    unstarMovie () {
      this.$store.commit('ISC', {isc: false})
      this.$store.dispatch('deleteCollectionMovie')
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less">
@import '../../../style/color.less';
@import "../../../style/base";
.movie-tag{
  padding: 20px;
  border-top: 1px dashed @line;
  width: 800px;
  margin: 30px auto;
  .movie-tophalf {
    display: inline-block;
    .movie-img {
      width: 200px;
      height: 300px;
      overflow: hidden;
      display: inline-block;

      .movie-tag-img {
        width: 250px;
      }
    }
    .movie-brief {
      display: inline-block;
      vertical-align: top;
      margin-left: 40px;
      font-size: 15px;
      p {
        margin-bottom: 20px;
      }
      .title {
        color: #666699;
        font-size: 25px;
        span {
          font-size: 25px;
        }
      }
    }
    .rate{
      .el-rate{
        display: inline-block;
        .el-rate__icon{
          font-size: 14px;
        }
      }
      .rate-value{
        color: #ff9900
      }
    }
  }
  .introduce-class{
    font-size: 15px;
    word-break: break-all;
  }
  .download-class{
    font-size: 12px;
    color: #0088cc;
    width: 700px;
    line-break: auto;
  }
  .copy{
  }
  .follow-class{
    border: none;
    margin: 0;
    padding: 0;
  }
}

</style>
